<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link type="text/css" rel="stylesheet" href="../css/mui.min.css" />
		<link type="text/css" rel="stylesheet" href="../css/advanced.search.css" />
		<style type="text/css">
			.outer-box {
				height: 200px !important;
				border: solid 1px #0000ff;
			}
			.outer-box2 {
				height: 30px;
				line-height: 30px;
				border: solid 1px #FF0000;
			}

			.inner-box {
				overflow: auto;
			}

			.test {
				width: 100%;
				height: 30px;
				color: #FF0000;
				font-size: 16px;
				line-height: 30px;
				text-align: center;
			}

			.test2 {
				color: #00ff00;
			}
			
			.brf {
				position: fixed;
				top: 0;
				left: 0;
				width: 200px;
				background: rgba(100, 100, 100, .2);
				color: red;
				z-index: 999;
				padding: 6px 10px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">测试scroll</h1>
		</header>
		
		<!-- 搜索框 -->
		<div class="mui-input-row advanced-search content-search-box">
		    <span class="mui-icon mui-icon-search"></span>
		    <input id="searchInput" type="text" class="mui-input-clear" placeholder="请输入您要查询的关键字">
			<a href="#picture" class="mui-icon mui-icon-camera" style="display: inline-block;"></a>
			<span class="mui-icon mui-icon-mic" onclick="startaptureAudio()"></span>
		</div>
		
		<div class="mui-content mui-scroll-wrapper outer">
			<div class="mui-scroll">
				<div class="outer-box test">3221321</div>
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div id="searchSlider" class="mui-scroll">
							<a id="tab1" class="mui-control-item mui-active" href="#c1">tab1</a>
							<a id="tab2" class="mui-control-item" href="#c2">tab2</a>
							<a id="tab3" class="mui-control-item" href="#c3">tab3</a>
							<a id="tab4" class="mui-control-item" href="#c4">tab4</a>
							<a id="tab5" class="mui-control-item" href="#c5">tab5</a>
							<a id="tab6" class="mui-control-item" href="#c6">tab6</a>
							<a id="tab7" class="mui-control-item" href="#c7">tab7</a>
						</div>
					</div>
					<div id="searchSliderGroup" class="mui-slider-group">
						<div id="c1" class="mui-slider-item mui-control-content mui-scroll-wrapper inner mui-active">
							<div id="cScroll1" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
								</div>
							</div>
						</div>
						
						<div id="c2" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll2" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
								</div>
							</div>
						</div>
						
						<div id="c3" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll3" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
								</div>
							</div>
						</div>
						
						<div id="c4" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll4" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
								</div>
							</div>
						</div>
						
						<div id="c5" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll5" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
									<div class="test test2">0-32213211111111</div>
								</div>
							</div>
						</div>
						
						<div id="c6" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll6" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box">
									<div class="test test2">0-000000</div>
									<div class="test test2">0-1111111</div>
									<div class="test test2">0-22222222</div>
									<div class="test test2">0-3221321111</div>
									<div class="test test2">0-32213211111</div>
									<div class="test test2">0-322132111111</div>
									<div class="test test2">0-3221321111111</div>
									<div class="test test2">0-32213211111111</div>
									<div class="test test2">0-322132111111111</div>
								</div>
							</div>
						</div>
						
						<div id="c7" class="mui-slider-item mui-control-content mui-scroll-wrapper inner">
							<div id="cScroll7" class="mui-scroll" init="true" total="0" page-no="0" page-size="10">
								<div class="list-box"></div>
							</div>
						</div>
				    </div>
				</div>
			</div>
		</div>
		<div class="brf">
			<div id="outerY"></div>
			<div id="innerY"></div>
		</div>
	</body>
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.js"></script>
	<script type="text/javascript" src="../js/mui.pullToRefresh.material.js"></script>
	
	<script type="text/javascript">
		mui.init();
		
		var num = 1,
			OTI = true,
			activeSlide = 0,
			contentOffsetTop = 80,
			sliderControllHeight = 38,
			innerScroll = '.inner>.mui-scroll',
			fullDiv = document.createElement('div'),
			outerWrapper = '.mui-scroll-wrapper.outer',
			innerWrapper = '.mui-scroll-wrapper.inner',
			outerTopHeight = document.querySelector("#outerTopBox") ? document.querySelector("#outerTopBox").clientHeight : 200,
			pullToRefreshObjs = mui(innerScroll).pullToRefresh({ // 初始化内部上拉加载
				up: {
					height: 50,//可选.默认50.触发上拉加载拖动距离
					auto: false,//可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
						loadData();
					} 
				}
			}),
			scrollOption = {
				scrollY: true,
				scrollX: false,
				bounce: true,      // 开启回弹动画
				indicators: false, //是否显示滚动条
				deceleration: 0.0006
			};
		
		if(mui.os.ios) {
			scrollOption.deceleration = 0.003;
		}
			
		console.log('pullToRefreshObjs -> ');
		console.log(pullToRefreshObjs);
		console.log('>>>>>>>>>>>>>>>>>>>>>>');
			
		fullDiv.setAttribute('style', 'position: fixed; bottom: 0; left: 0; top: 0;');
		fullDiv.setAttribute('id', 'fullH');
		document.body.appendChild(fullDiv);
		
		var fullscreen = fullDiv.clientHeight - contentOffsetTop;
		mui.each(document.querySelectorAll('.mui-scroll-wrapper.inner'), function(i, ele) {
			ele.style.height = (fullscreen - sliderControllHeight) + 'px';
		});
		
		var innerScrollObjs = mui(innerWrapper).scroll(scrollOption); // 初始化内部滚动
		for (var i in innerScrollObjs) {
			innerScrollObjs[i].ITO = false;
		}
		console.log('innerScrollObjs -> ');
		console.log(innerScrollObjs);
		console.log('>>>>>>>>>>>>>>>>>>>>>>');
			
		// 初始化外部滚动
		scrollOption.bounce = false;
		var outerScrollObj = mui(outerWrapper).scroll(scrollOption);
		console.log('outerScrollObj -> ');
		console.log(outerScrollObj);
		console.log('>>>>>>>>>>>>>>>>>>>>>>');
		
		// 标签页监听
		document.getElementById('slider').addEventListener('slide', function(e) {
			activeSlide = e.detail.slideNumber;
			console.log('active slide index -> ' + activeSlide);
			
			refreshSlideScrollAndPullUp();
		});
		
		changeInnerEventListner('remove');
		
		// 添加外部区域滚动事件监听
		document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
		
		// 添加内部区域滚动事件监听
		// document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('scroll', innerToOuter, false);
		
		// 上拉加载回调
		function loadData() {
			console.log('loadData start -> ');
			var activeScroll = getActiveSlideScroll();
			setTimeout(function(){
				console.log('loadData start render -> ');
				for (var i = 0; i < 10; i++) {
					var div = document.createElement('div');
					div.innerHTML = '第 ' + num + '-' + i + '个div!!!';
					activeScroll.querySelector('.list-box').appendChild(div);
				}
				num++;
				console.log('num -> ' + num);
				endPullUpToRefresh(activeScroll, num > 2);
			}, 500);
		}
		
		function outerToInner() {
			console.log("outer scroll -> ");
			console.log(outerScrollObj);
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>OTI -> ' + OTI);
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>ITO -> ' + innerScrollObjs[activeSlide].ITO);
			document.querySelector('#outerY').innerHTML = 'outerY：' + outerScrollObj.y;
			if (OTI && outerScrollObj.y <= (0 - outerTopHeight)) {
				// outerScroll.scrollTo(0, -200, 100);
				changeOuterEventListner('remove');
				
				changeInnerEventListner('add');
				
				changeIOScrollListner("OTI");
			}
		}
		
		function innerToOuter() {
			console.log('inner scroll ' + activeSlide + ' -> ');
			console.log(innerScrollObjs[activeSlide]);
			console.log('inner scroll ' + activeSlide + ' y -> ' + innerScrollObjs[activeSlide].y);
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>OTI -> ' + OTI);
			console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>ITO -> ' + innerScrollObjs[activeSlide].ITO);
			document.querySelector('#innerY').innerHTML = 'innerY' + activeSlide + '：' + innerScrollObjs[activeSlide].y;
			if (innerScrollObjs[activeSlide].ITO && innerScrollObjs[activeSlide].y >= 0) {
				// innerScroll.scrollTo(0, 0, 100);
				changeInnerEventListner('remove');
				
				changeOuterEventListner('add');
				
				changeIOScrollListner("ITO");
			}
		}
		
		// 添加 或 取消 内部滚动区域 滚动监听 和 上拉加载监听
		function changeInnerEventListner(type) {
			if ('add' == type) {
				// 添加内部 滚动 和 推拽 的监听
				document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('drag', innerScrollObjs[activeSlide]);
				window.addEventListener('scroll', innerScrollObjs[activeSlide]);
				
				// 添加内部上拉加载有关的 上拉拖拽 和 滚动 监听
				document.querySelectorAll(innerScroll)[activeSlide].addEventListener('dragup', pullToRefreshObjs[activeSlide]);
				window.addEventListener('scroll', pullToRefreshObjs[activeSlide]);
			} else if ('remove' == type) {
				// 取消内部 滚动 和 推拽 的监听
				document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('drag', innerScrollObjs[activeSlide]);
				window.removeEventListener('scroll', innerScrollObjs[activeSlide]);
				
				// 取消内部上拉加载有关的 上拉拖拽 和 滚动 监听
				document.querySelectorAll(innerScroll)[activeSlide].removeEventListener('dragup', pullToRefreshObjs[activeSlide]);
				window.removeEventListener('scroll', pullToRefreshObjs[activeSlide]);
			}
		}
		
		// 添加 或 取消 外部滚动区域 滚动监听
		function changeOuterEventListner(type) {
			if ('add' == type) {
				document.querySelector(outerWrapper).addEventListener('drag', outerScrollObj);
				window.addEventListener('scroll', outerScrollObj);
			} else if ('remove' == type) {
				document.querySelector(outerWrapper).removeEventListener('drag', outerScrollObj);
				window.removeEventListener('scroll', outerScrollObj);
			}
		}
		
		// 切换内部外部滚动监听
		function changeIOScrollListner(type) {
			if ('ITO' == type) {
				OTI = true;
				innerScrollObjs[activeSlide].ITO = false;
				setTimeout(function(){
					document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('scroll', innerToOuter, false);
					document.querySelector(outerWrapper).addEventListener('scroll', outerToInner, false);
					// innerScrollObjs[activeSlide].scrollListner = false;
				}, 1);
			} else if ('OTI' == type) {
				OTI = false;
				innerScrollObjs[activeSlide].ITO = true;
				setTimeout(function() {
					document.querySelector(outerWrapper).removeEventListener('scroll', outerToInner, false);
					document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('scroll', innerToOuter, false);
					// innerScrollObjs[activeSlide].scrollListner = true;
				}, 1);
			}
		}
		
		// slider内容区 滚动 与 上拉 监听刷新
		function refreshSlideScrollAndPullUp() {
			// 外部滚动到极限  内部未进行 滚动 和 上拉 监听
			if (!OTI && !innerScrollObjs[activeSlide].ITO) {
				// 添加内部 滚动 和 上拉 监听
				console.log('add inner listner ->>> ')
				changeInnerEventListner('add');
				innerScrollObjs[activeSlide].ITO = true;
				document.querySelectorAll(innerWrapper)[activeSlide].addEventListener('scroll', innerToOuter, false);
			}
			
			// 外部仍可滚动 内部存在 滚动 和 上拉 监听
			if (OTI) {
				// 移除内部 滚动 和 上拉 监听
				console.log('remove inner listner ->>> ');
				changeInnerEventListner('remove');
				innerScrollObjs[activeSlide].ITO = false;
				document.querySelectorAll(innerWrapper)[activeSlide].removeEventListener('scroll', innerToOuter, false);
			}
		}
		
		// 获取当前显示的slider
		function getActiveSlideScroll() {
			return pullToRefreshObjs[activeSlide].element;
		}
		
		// 结束 或 继续上拉加载
		function endPullUpToRefresh(activeScroll, flag) {
			mui(activeScroll).pullToRefresh().endPullUpToRefresh(flag);
		}
	</script>
</html>
